home *** CD-ROM | disk | FTP | other *** search
/ PC World Komputer 2010 April / PCWorld0410.iso / pluginy Firefox / 60 / 60.xpi / chrome / webdeveloper.jar / content / webdeveloper / features / display_ruler.js < prev    next >
Text File  |  2009-06-30  |  16KB  |  446 lines
  1. var webdeveloper_rulerDrag   = false;
  2. var webdeveloper_rulerEndX   = 0;
  3. var webdeveloper_rulerEndY   = 0;
  4. var webdeveloper_rulerMove   = false;
  5. var webdeveloper_rulerMoveX  = 0;
  6. var webdeveloper_rulerMoveY  = 0;
  7. var webdeveloper_rulerResize = false;
  8. var webdeveloper_rulerStartX = 0;
  9. var webdeveloper_rulerStartY = 0;
  10.  
  11. // Creates the ruler block
  12. function webdeveloper_createRuler(ownerDocument)
  13. {
  14.     var containerElement = ownerDocument.createElement("div");
  15.     var resizeElement    = ownerDocument.createElement("div");
  16.     var rulerElement     = ownerDocument.createElement("div");
  17.  
  18.     resizeElement.setAttribute("id", "webdeveloper-ruler-north-west");
  19.     containerElement.appendChild(resizeElement);
  20.  
  21.     resizeElement = ownerDocument.createElement("div");
  22.     resizeElement.setAttribute("id", "webdeveloper-ruler-north-east");
  23.     containerElement.appendChild(resizeElement);
  24.  
  25.     resizeElement = ownerDocument.createElement("div");
  26.     resizeElement.setAttribute("id", "webdeveloper-ruler-south-east");
  27.     containerElement.appendChild(resizeElement);
  28.  
  29.     resizeElement = ownerDocument.createElement("div");
  30.     resizeElement.setAttribute("id", "webdeveloper-ruler-south-west");
  31.     containerElement.appendChild(resizeElement);
  32.  
  33.     containerElement.setAttribute("id", "webdeveloper-ruler-container");
  34.     rulerElement.appendChild(containerElement);
  35.  
  36.     rulerElement.setAttribute("id", "webdeveloper-ruler");
  37.     webdeveloper_getDocumentBodyElement(ownerDocument).appendChild(rulerElement);
  38. }
  39.  
  40. // Called when the ruler is deselected
  41. function webdeveloper_deselectRuler(event)
  42. {
  43.     // If not moving the ruler
  44.     if(!webdeveloper_rulerMove)
  45.     {
  46.         var xPosition = event.pageX;
  47.         var yPosition = event.pageY;
  48.  
  49.         // If the X position is greater than the start X position
  50.         if(xPosition > webdeveloper_rulerStartX)
  51.         {
  52.             webdeveloper_rulerEndX = xPosition;
  53.         }
  54.         else
  55.         {
  56.             webdeveloper_rulerEndX   = webdeveloper_rulerStartX;
  57.             webdeveloper_rulerStartX = xPosition;
  58.         }
  59.  
  60.         // If the Y position is greater than the start Y position
  61.         if(yPosition > webdeveloper_rulerStartY)
  62.         {
  63.             webdeveloper_rulerEndY = yPosition;
  64.         }
  65.         else
  66.         {
  67.             webdeveloper_rulerEndY   = webdeveloper_rulerStartY;
  68.             webdeveloper_rulerStartY = yPosition;
  69.         }
  70.     }
  71.  
  72.     webdeveloper_rulerDrag   = false;
  73.     webdeveloper_rulerMove   = false;
  74.     webdeveloper_rulerMoveX  = 0;
  75.     webdeveloper_rulerMoveY  = 0;
  76.     webdeveloper_rulerResize = false;
  77.  
  78.     webdeveloper_updateRulerEnd();
  79.     webdeveloper_updateRulerStart();
  80. }
  81.  
  82. // Displays a ruler
  83. function webdeveloper_displayRuler(element)
  84. {
  85.     // If the page has frames
  86.     if(webdeveloper_pageHasFrames())
  87.     {
  88.         window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_framesNotSupported"));
  89.     }
  90.     else
  91.     {
  92.         var checked         = false;
  93.         var contentDocument = webdeveloper_getContentDocument();
  94.         var divElement      = null;
  95.  
  96.         // If the element is set
  97.         if(element)
  98.         {
  99.             checked = webdeveloper_convertToBoolean(element.getAttribute("checked"));
  100.         }
  101.  
  102.         webdeveloper_configureElement(document.getElementById("webdeveloper-ruler-toolbar"), "hidden", !checked);
  103.  
  104.         // If displaying a ruler
  105.         if(checked)
  106.         {
  107.             webdeveloper_updateRulerEnd();
  108.             webdeveloper_updateRulerStart();
  109.             webdeveloper_createRuler(contentDocument);
  110.  
  111.             contentDocument.addEventListener("mousedown", webdeveloper_selectRuler, true);
  112.             contentDocument.addEventListener("mousemove", webdeveloper_moveRuler, false);
  113.             contentDocument.addEventListener("mouseup", webdeveloper_deselectRuler, true);
  114.         }
  115.         else
  116.         {
  117.             var rulerHeightElement = document.getElementById("webdeveloper-ruler-height");
  118.             var rulerWidthElement  = document.getElementById("webdeveloper-ruler-width");
  119.  
  120.             webdeveloper_removeRuler(contentDocument);
  121.  
  122.             // Try to remove the event listener
  123.             try
  124.             {
  125.                 contentDocument.removeEventListener("mousedown", webdeveloper_selectRuler, true);
  126.             }
  127.             catch(exception)
  128.             {
  129.                 // Do nothing
  130.             }
  131.  
  132.             // Try to remove the event listener
  133.             try
  134.             {
  135.                 contentDocument.removeEventListener("mousemove", webdeveloper_moveRuler, false);
  136.             }
  137.             catch(exception)
  138.             {
  139.                 // Do nothing
  140.             }
  141.  
  142.             // Try to remove the event listener
  143.             try
  144.             {
  145.                 contentDocument.removeEventListener("mouseup", webdeveloper_deselectRuler, true);
  146.             }
  147.             catch(exception)
  148.             {
  149.                 // Do nothing
  150.             }
  151.  
  152.             // If the ruler height element is set
  153.             if(rulerHeightElement)
  154.             {
  155.                 rulerHeightElement.value = "";
  156.             }
  157.  
  158.             // If the ruler width element is set
  159.             if(rulerWidthElement)
  160.             {
  161.                 rulerWidthElement.value = "";
  162.             }
  163.  
  164.             webdeveloper_rulerDrag   = false;
  165.             webdeveloper_rulerEndX   = 0;
  166.             webdeveloper_rulerEndY   = 0;
  167.             webdeveloper_rulerMove   = false;
  168.             webdeveloper_rulerMoveX  = 0;
  169.             webdeveloper_rulerMoveY  = 0;
  170.             webdeveloper_rulerResize = false;
  171.             webdeveloper_rulerStartX = 0;
  172.             webdeveloper_rulerStartY = 0;
  173.         }
  174.  
  175.         webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_ruler.css", "webdeveloper-display-ruler");
  176.     }
  177. }
  178.  
  179. // Called when the ruler is moved
  180. function webdeveloper_moveRuler(event)
  181. {
  182.     var element = event.target;
  183.  
  184.     // If the element is set
  185.     if(element)
  186.     {
  187.         var ownerDocument = element.ownerDocument;
  188.  
  189.         // If the element has an owner document
  190.         if(ownerDocument)
  191.         {
  192.             var rulerElement = ownerDocument.getElementById("webdeveloper-ruler");
  193.  
  194.             // If the ruler element is set
  195.             if(rulerElement)
  196.             {
  197.                 var xPosition = event.pageX;
  198.                 var yPosition = event.pageY;
  199.  
  200.                 // If the ruler is being dragged or resized
  201.                 if(webdeveloper_rulerDrag || webdeveloper_rulerResize)
  202.                 {
  203.                     var height             = 0;
  204.                     var rulerHeightElement = document.getElementById("webdeveloper-ruler-height");
  205.                     var rulerWidthElement  = document.getElementById("webdeveloper-ruler-width");
  206.                     var width              = 0;
  207.  
  208.                     webdeveloper_rulerEndX = xPosition;
  209.                     webdeveloper_rulerEndY = yPosition;
  210.  
  211.                     // If the start x position is greater than the end x position
  212.                     if(webdeveloper_rulerStartX > webdeveloper_rulerEndX)
  213.                     {
  214.                         width = webdeveloper_rulerStartX - webdeveloper_rulerEndX;
  215.  
  216.                         rulerElement.style.left = xPosition + "px";
  217.                     }
  218.                     else
  219.                     {
  220.                         width = webdeveloper_rulerEndX - webdeveloper_rulerStartX;
  221.  
  222.                         rulerElement.style.left = webdeveloper_rulerStartX + "px";
  223.                     }
  224.  
  225.                     // If the start y position is greater than the end y position
  226.                     if(webdeveloper_rulerStartY > webdeveloper_rulerEndY)
  227.                     {
  228.                         height = webdeveloper_rulerStartY - webdeveloper_rulerEndY;
  229.  
  230.                         rulerElement.style.top = webdeveloper_rulerEndY + "px";
  231.                     }
  232.                     else
  233.                     {
  234.                         height = webdeveloper_rulerEndY - webdeveloper_rulerStartY;
  235.  
  236.                         rulerElement.style.top = webdeveloper_rulerStartY + "px";
  237.                     }
  238.  
  239.                     rulerElement.style.height = height + "px";
  240.                     rulerElement.style.width  = width + "px";
  241.  
  242.                     // If the ruler height element is set
  243.                     if(rulerHeightElement)
  244.                     {
  245.                         rulerHeightElement.value = height;
  246.                     }
  247.  
  248.                     // If the ruler width element is set
  249.                     if(rulerWidthElement)
  250.                     {
  251.                         rulerWidthElement.value = width;
  252.                     }
  253.                 }
  254.                 else if(webdeveloper_rulerMove)
  255.                 {
  256.                     var newXPosition = xPosition - webdeveloper_rulerMoveX;
  257.                     var newYPosition = yPosition - webdeveloper_rulerMoveY;
  258.  
  259.                     rulerElement.style.left = newXPosition + "px";
  260.                     rulerElement.style.top  = newYPosition + "px";
  261.  
  262.                     webdeveloper_rulerEndX   = newXPosition + rulerElement.clientWidth;
  263.                     webdeveloper_rulerEndY   = newYPosition + rulerElement.clientHeight;
  264.                     webdeveloper_rulerStartX = newXPosition;
  265.                     webdeveloper_rulerStartY = newYPosition;
  266.                 }
  267.  
  268.                 webdeveloper_updateRulerEnd();
  269.                 webdeveloper_updateRulerStart();
  270.             }
  271.         }
  272.     }
  273. }
  274.  
  275. // Remove the ruler from the document
  276. function webdeveloper_removeRuler(ownerDocument)
  277. {
  278.     webdeveloper_removeElement(ownerDocument.getElementById("webdeveloper-ruler"));
  279. }
  280.  
  281. // Called when the ruler is selected
  282. function webdeveloper_selectRuler(event)
  283. {
  284.     // If the click was not a right click
  285.     if(event.button != 2)
  286.     {
  287.         var element = event.target;
  288.  
  289.         // If the element is set
  290.         if(element)
  291.         {
  292.             var elementName   = element.tagName;
  293.             var ownerDocument = element.ownerDocument;
  294.  
  295.             // If the element has a name and it is not scrollbar and it has an owner document
  296.             if(elementName && elementName != "scrollbar" && ownerDocument)
  297.             {
  298.                 var rulerElement = ownerDocument.getElementById("webdeveloper-ruler");
  299.                 var xPosition    = event.pageX;
  300.                 var yPosition    = event.pageY;
  301.  
  302.                 // If the ruler element is set
  303.                 if(rulerElement)
  304.                 {
  305.                     // If element is the container element
  306.                     if(element == ownerDocument.getElementById("webdeveloper-ruler-container"))
  307.                     {
  308.                         webdeveloper_rulerMove  = true;
  309.                         webdeveloper_rulerMoveX = xPosition - rulerElement.offsetLeft;
  310.                         webdeveloper_rulerMoveY = yPosition - rulerElement.offsetTop;
  311.                     }
  312.                     else if(element == ownerDocument.getElementById("webdeveloper-ruler-north-east"))
  313.                     {
  314.                         webdeveloper_rulerResize = true;
  315.                         webdeveloper_rulerStartX = rulerElement.offsetLeft;
  316.                         webdeveloper_rulerStartY = rulerElement.offsetTop + rulerElement.clientHeight;
  317.                     }
  318.                     else if(element == ownerDocument.getElementById("webdeveloper-ruler-north-west"))
  319.                     {
  320.                         webdeveloper_rulerResize = true;
  321.                         webdeveloper_rulerStartX = rulerElement.offsetLeft + rulerElement.clientWidth;
  322.                         webdeveloper_rulerStartY = rulerElement.offsetTop + rulerElement.clientHeight;
  323.                     }
  324.                     else if(element == ownerDocument.getElementById("webdeveloper-ruler-south-east"))
  325.                     {
  326.                         webdeveloper_rulerResize = true;
  327.                         webdeveloper_rulerStartX = rulerElement.offsetLeft;
  328.                         webdeveloper_rulerStartY = rulerElement.offsetTop;
  329.                     }
  330.                     else if(element == ownerDocument.getElementById("webdeveloper-ruler-south-west"))
  331.                     {
  332.                         webdeveloper_rulerResize = true;
  333.                         webdeveloper_rulerStartX = rulerElement.offsetLeft + rulerElement.clientWidth;
  334.                         webdeveloper_rulerStartY = rulerElement.offsetTop;
  335.                     }
  336.                     else
  337.                     {
  338.                         webdeveloper_rulerDrag   = true;
  339.                         webdeveloper_rulerEndX   = 0;
  340.                         webdeveloper_rulerEndY   = 0;
  341.                         webdeveloper_rulerStartX = xPosition;
  342.                         webdeveloper_rulerStartY = yPosition;
  343.  
  344.                         webdeveloper_updateRulerEnd();
  345.                         webdeveloper_updateRulerStart();
  346.                     }
  347.                 }
  348.             }
  349.         }
  350.  
  351.         event.stopPropagation();
  352.         event.preventDefault();
  353.     }
  354. }
  355.  
  356. // Update the ruler end information
  357. function webdeveloper_updateRulerEnd()
  358. {
  359.     var endXElement = document.getElementById("webdeveloper-ruler-end-x");
  360.     var endYElement = document.getElementById("webdeveloper-ruler-end-y");
  361.  
  362.     // If the end X element is set
  363.     if(endXElement)
  364.     {
  365.         endXElement.value = webdeveloper_rulerEndX;
  366.     }
  367.  
  368.     // If the end Y element is set
  369.     if(endYElement)
  370.     {
  371.         endYElement.value = webdeveloper_rulerEndY;
  372.     }
  373. }
  374.  
  375. // Update the ruler height
  376. function webdeveloper_updateRulerHeight(element)
  377. {
  378.     var height       = element.value;
  379.     var stringBundle = document.getElementById("webdeveloper-string-bundle");
  380.  
  381.     // If the height is empty or not a number or less than zero
  382.     if(!height || parseInt(height) != height || height <= 0)
  383.     {
  384.         webdeveloper_error(stringBundle.getString("webdeveloper_invalidHeight"));
  385.     }
  386.     else
  387.     {
  388.         var rulerElement = webdeveloper_getContentDocument().getElementById("webdeveloper-ruler");
  389.  
  390.         // If the ruler element is set
  391.         if(rulerElement)
  392.         {
  393.             height                    = parseInt(height);
  394.             rulerElement.style.height = height + "px";
  395.             webdeveloper_rulerEndY    = webdeveloper_rulerStartY + height;
  396.  
  397.             webdeveloper_updateRulerEnd();
  398.         }
  399.     }
  400. }
  401.  
  402. // Update the ruler start information
  403. function webdeveloper_updateRulerStart()
  404. {
  405.     var startXElement = document.getElementById("webdeveloper-ruler-start-x");
  406.     var startYElement = document.getElementById("webdeveloper-ruler-start-y");
  407.  
  408.     // If the start X element is set
  409.     if(startXElement)
  410.     {
  411.         startXElement.value = webdeveloper_rulerStartX;
  412.     }
  413.  
  414.     // If the start Y element is set
  415.     if(startYElement)
  416.     {
  417.         startYElement.value = webdeveloper_rulerStartY;
  418.     }
  419. }
  420.  
  421. // Update the ruler width
  422. function webdeveloper_updateRulerWidth(element)
  423. {
  424.     var stringBundle = document.getElementById("webdeveloper-string-bundle");
  425.     var width        = element.value;
  426.  
  427.     // If the width is empty or not a number or less than zero
  428.     if(!width || parseInt(width) != width || width <= 0)
  429.     {
  430.         webdeveloper_error(stringBundle.getString("webdeveloper_invalidWidth"));
  431.     }
  432.     else
  433.     {
  434.         var rulerElement = webdeveloper_getContentDocument().getElementById("webdeveloper-ruler");
  435.  
  436.         // If the ruler element is set
  437.         if(rulerElement)
  438.         {
  439.             width                    = parseInt(width);
  440.             rulerElement.style.width = width + "px";
  441.             webdeveloper_rulerEndX   = webdeveloper_rulerStartX + width;
  442.  
  443.             webdeveloper_updateRulerEnd();
  444.         }
  445.     }
  446. }